<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stock Trading Portfolio</title>
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
    <link href="../assets/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/common/portfolio.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../assets/lib/html5shiv/dist/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
      <div id="heading" class="masthead">
        <div class="pull-right">
          <span class="text-info" data-bind="text: username"><em></em></span>&nbsp;
          <a href="../cujojs" class="btn"><i class="icon-random"></i> Switch to cujoJS</a>&nbsp;
          <button data-bind="click: logout" class="btn"><i class="icon-off"></i></button>
        </div>
        <h3 class="muted">Stock Trading Portfolio</h3>
      </div>
      <div id="main-content">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Company</th>
              <th>Ticker</th>
              <th class="number">Price</th>
              <th class="number">Change</th>
              <th>%</th>
              <th class="number">Shares</th>
              <th class="number">Value</th>
              <th></th>
            </tr>
          </thead>
          <tbody data-bind="foreach: portfolio().rows">
            <tr>
              <td data-bind="text: company"></td>
              <td data-bind="text: ticker"></td>
              <td data-bind="text: formattedPrice" class="number"></td>
              <td data-bind="text: change, style: {color: change() < 0 ? 'red' : 'green'}" class="number"></td>
              <td data-bind="html: arrow" class="icon"></td>
              <td data-bind="text: shares" class="number"></td>
              <td data-bind="text: formattedValue" class="number"></td>
              <td class="trade-buttons">
                <button class="btn btn-primary" data-bind="click: $root.trade().showBuy">Buy</button>
                <button class="btn btn-primary" data-bind="click: $root.trade().showSell">Sell</button>
              </td>
             </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="5">Total</td>
              <td data-bind="text: portfolio().totalShares" class="number"></td>
              <td data-bind="text: portfolio().totalValue" class="number"></td>
              <td></td>
            </tr>
          </tfoot>
          <tbody></tbody>
        </table>
        <div class="alert alert-warning">
          <h5>Notifications</h5>
          <ul data-bind="foreach: notifications">
            <li data-bind="text: notification"></li>
          </ul>
        </div>
      </div>
      <div id="trade-dialog" class="modal hide fade" tabindex="-1">
        <div class="modal-body">
          <form class="form-horizontal" data-bind="submit: trade().executeTrade">
            <fieldset>
              <legend>
                <span data-bind="text: trade().action"></span>
                <span data-bind="text: trade().currentRow().company"></span> Stock
              </legend>
            </fieldset>
            <div class="control-group" data-bind="css: {error: trade().error()}">
              <label class="control-label" for="inputShares">Shares</label>
              <div class="controls">
                <input id="inputShares" type="text" data-bind="value: trade().sharesToTrade">
                <span class="help-inline" data-bind="text: trade().error">Please enter</span>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox"><input type="checkbox" data-bind="checked: trade().suppressValidation">
                  Suppress client-side validation</label>
              </div>
            </div>
            <button class="btn" data-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">
              <span data-bind="text: trade().action"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- 3rd party -->
    <script src="../assets/lib/jquery/jquery.js"></script>
    <script src="../assets/lib/bootstrap/js/bootstrap.js"></script>
    <script src="../assets/lib/knockout/knockout.js"></script>
    <script src="../assets/lib/sockjs/sockjs.js"></script>
    <script src="../assets/lib/stomp/lib/stomp.min.js"></script>

    <!-- application -->
    <script src="portfolio.js"></script>
    <script type="text/javascript">
      (function() {
        var socket = new SockJS('/spring-websocket-portfolio/portfolio');
        var stompClient = Stomp.over(socket);

        var appModel = new ApplicationModel(stompClient);
        ko.applyBindings(appModel);

        appModel.connect();
        appModel.pushNotification("Trade results take a 2-3 second simulated delay. Notifications will appear.");
      })();
    </script>

  </body>
</html>
